<template>
    <scroll-view :scroll-y="true" :style="'height: ' + height + 'px;'" @scrolltolower="handleLoadMore" :lower-threshold="100">
        <view class="pinterest-container">
            <view class="pinterest-waterfall">
                <view class="pinterest-column">
                    <view class="pinterest-item" @tap="handleItemClick(item)" :data-item="item" :data-index="index" v-for="(item, index) in leftItems" :key="index">
                        <image class="pinterest-cover" :src="item.image[0].url" mode="widthFix" v-if="item.image && item.image.length > 0 && item.image[0].type == 'image'"></image>
                        <video class="pinterest-cover" :src="item.image[0].url" mode="widthFix" v-if="item.image && item.image.length > 0 && item.image[0].type == 'video'"></video>
                        <view class="pinterest-content">
                            <text class="pinterest-title">{{ item.title }}</text>
                            <text class="pinterest-summary">{{ item.summary }}</text>
                        </view>
                    </view>
                </view>
                <view class="pinterest-column">
                    <view class="pinterest-item" @tap="handleItemClick(item)" :data-item="item" :data-index="index" v-for="(item, index) in rightItems" :key="index">
                        <image class="pinterest-cover" :src="item.image[0].url" mode="widthFix" v-if="item.image && item.image.length > 0 && item.image[0].type == 'image'"></image>
                        <video class="pinterest-cover" :src="item.image[0].url" mode="widthFix" v-if="item.image && item.image.length > 0 && item.image[0].type == 'video'"></video>
                        <view class="pinterest-content">
                            <text class="pinterest-title">{{ item.title }}</text>
                            <text class="pinterest-summary">{{ item.summary }}</text>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 加载状态提示 -->
            <view class="loading-status">
                <view v-if="isLoading" class="loading-text">
                    <text>加载中...</text>
                </view>
                <view v-else-if="!hasMore && items.length > 0" class="no-more-text">
                    <text>没有更多内容了</text>
                </view>
                <view v-else-if="items.length === 0 && !isLoading" class="empty-text">
                    <text>暂无内容</text>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits } from 'vue';

// 类型定义
interface PinterestItem {
  [key: string]: any;
}

interface TouchEvent {
  currentTarget: {
    dataset: {
      item: PinterestItem;
      index: number;
    };
  };
}

// Props定义
interface Props {
  height?: number;
  items?: PinterestItem[];
  isLoading?: boolean;
  hasMore?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  height: 500,
  items: () => [],
  isLoading: false,
  hasMore: true
});

// 事件定义
const emit = defineEmits<{
  itemClick: [item: PinterestItem, index: number];
  loadMore: [];
}>();

// 响应式数据
const leftItems = ref<PinterestItem[]>([]);
const rightItems = ref<PinterestItem[]>([]);

// 初始化瀑布流
const initWaterfall = (newItems: PinterestItem[] = [], isAppend: boolean = false): void => {
  const itemsData = newItems.length > 0 ? newItems : [];
  
  if (!isAppend) {
    // 首次加载，清空现有数据
    leftItems.value = [];
    rightItems.value = [];
  }
  
  // 从当前已有数据的长度开始分配新数据
  const startIndex = leftItems.value.length + rightItems.value.length;
  
  itemsData.forEach((item, index) => {
    // 简单的瀑布流算法：将内容分配到高度较小的一列
    const actualIndex = startIndex + index;
    if (actualIndex % 2 === 0) {
      leftItems.value.push(item);
    } else {
      rightItems.value.push(item);
    }
  });
};

// 处理项目点击
const handleItemClick = (e: TouchEvent): void => {
  console.log(e)
  emit('itemClick', e);
};

// 处理加载更多
const handleLoadMore = (): void => {
  if (!props.isLoading && props.hasMore) {
    emit('loadMore');
  }
};

// 监听items变化
watch(
  () => props.items,
  (newItems, oldItems) => {
    if (newItems.length === 0) {
      // 清空数据
      initWaterfall([], false);
    } else if (oldItems && newItems.length > oldItems.length) {
      // 追加数据
      const appendItems = newItems.slice(oldItems.length);
      initWaterfall(appendItems, true);
    } else {
      // 重新加载数据
      initWaterfall(newItems, false);
    }
  },
  { immediate: true, deep: true }
);
</script>

<style scoped>
/* 瀑布流容器样式 */
.pinterest-container {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  padding-bottom: 100rpx;
}

.pinterest-waterfall {
  display: flex;
  gap: 20rpx;
}

.pinterest-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.pinterest-item {
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.pinterest-item:active {
  transform: scale(0.98);
}

.pinterest-cover {
  width: 100%;
  background-color: #f0f0f0;
  display: block;
}

.pinterest-content {
  padding: 24rpx;
}

.pinterest-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 12rpx;
  display: block;
}

.pinterest-summary {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 加载状态样式 */
.loading-status {
  width: 100%;
  padding: 40rpx 0;
  text-align: center;
}

.loading-text,
.no-more-text,
.empty-text {
  font-size: 28rpx;
  color: #999;
  line-height: 1.5;
}

.loading-text {
  color: #666;
}

.empty-text {
  color: #ccc;
  padding: 80rpx 0;
}
</style>